<template>
  <div class="ccui-tab-wrapper">
    <template v-if="isList">
      <el-button
        v-for="item in tabBtn"
        :key="item.value"
        size="mini"
        :type="isFocus === item.value ? 'table-top-active' : 'table-top'"
        @click="tabBtnChange(item)"
        class="tabbtn"
        >{{ item.label }}
        <span v-show="isFocus === item.value">({{ totalNum }})</span>
      </el-button>
    </template>

    <template v-else>
      <el-button
        size="mini"
        v-for="item in tabBtn"
        :key="item.value"
        :type="isFocus === item.value ? 'table-top-active' : 'table-top'"
        @click="tabBtnChange(item)"
        >{{ item.label }}
        <slot />
      </el-button>
    </template>
  </div>
</template>

<script>
export default {
  name: "anchorTitle",
  props: {
    isList: {
      type: Boolean,
      default: false
    },
    totalNum: {
      type: Number,
      default: 0
    },
    isFocus: {
      type: String,
      default: ""
    },
    tabBtn: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    tabBtnChange(item) {
      this.$emit("tabBtnChange", item);
    }
  }
};
</script>
